import '@wangeditor/editor/dist/css/style.css'; // 引入 css

import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import React, { useEffect, useState } from 'react';

interface MyEditorProps {
  id?: string;
  value?: string;
  onChange?: (value: string) => void;
}
const MyEditor: React.FC<MyEditorProps> = (props) => {
  const { id, value, onChange } = props;
  // editor 实例
  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
  // 编辑器内容
  const [html, setHtml] = useState<string>(value || '');
  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法

  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    // TS 语法
    placeholder: '请输入内容...',
  };

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor === null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  useEffect(() => {
    onChange?.(html);
  }, [html]);

  return (
    <>
      <div
        style={{ border: '1px solid #ccc', zIndex: 100, marginTop: '15px' }}
        id={id}
      >
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{ borderBottom: '1px solid #ccc' }}
        />
        <Editor
          defaultConfig={editorConfig}
          value={html}
          onCreated={setEditor}
          onChange={(editor) => setHtml(editor.getHtml())}
          mode="default"
          style={{ height: '500px' }}
        />
      </div>
    </>
  );
};
export default MyEditor;
